<template>
  <div class="container">
    <el-row>
      <el-col :span="4" v-for="(video, index) in tableData">
        <el-card :body-style="{ padding: '5px'}" shadow="hover" style="margin:0 10px 13px 0 ">
          <!--       TODO  注意替换为自己的七牛云域名     -->
          <img :src=qiniuServer+video.cover_key
               class="image">
          <div style="padding-top: 10px;">
            <span>{{ video.title }}</span>
            <div class="bottom clearfix">
              <time class="time">{{ video.create_time }}</time>
              <el-button type="text" class="button" @click="showVideo(video.id,video.key)">
                <i class="el-icon-video-play"></i>
                <span class="plays">{{ video.views }}</span>
              </el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row v-show="total">
      <el-pagination
        @current-change="handleCurrentChange"
        layout="prev, pager, next"
        :current-page=currentPage
        :page-size=pageSize
        :total=total>
      </el-pagination>
    </el-row>
    <el-row v-show="total==0">
      <h2>没有可观看的视频，等待上传...</h2>
    </el-row>
    <!--    视频-->
    <el-dialog :visible.sync="centerDialogVisible" :title=title width="50%" @close="clearInfo">
      <video width="100%" controls ref="videoPlayer" src="">
        您的浏览器不支持 HTML5 video 标签。
      </video>
    </el-dialog>
  </div>
</template>

<script>
import {qiniuServer} from "@/settings";
import {onlineClassPage, updateViews} from "@/api/online";

export default {
  name: 'download',
  data() {
    return {
      currentPage: 1,
      pageSize: 18,
      title: '在线视频',
      centerDialogVisible: false,
      total: 0,
      tableData: [],
      qiniuServer: qiniuServer
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val
      this.getOnlineClassPage()
    },
    showVideo(id, src) {
      this.centerDialogVisible = true
      this.$nextTick(() => {
        // TODO  注意替换为自己的七牛云域名
        this.$refs.videoPlayer.src = qiniuServer + src
      })
      // 更新资源浏览量
      updateViews(id).then(response => {
        this.getOnlineClassPage()
      })
    },
    clearInfo() {
      this.link = ""
      this.$refs.videoPlayer.pause();
      this.$refs.videoPlayer.currentTime = 0;
      this.getOnlineClassPage()
    },
    getOnlineClassPage() {
      onlineClassPage({page: this.currentPage, size: this.pageSize}).then(response => {
        this.total = response.total
        this.tableData = response.table_data
      })
    }
  },
  created() {
    this.getOnlineClassPage()
  }
}
</script>
<style scoped lang="scss">
.time, .plays {
  font-size: 13px;
  color: #999;
}


.container {
  padding: 30px;
}

.bottom {
  margin-top: 13px;
  line-height: 13px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  height: 100px;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

</style>

